<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/swiper-3.4.2.min.css" />
<style>
	body {
		background-color: #fff;
	}
	
	header {
		height: 40px;
		background-color: #fff;
		overflow: hidden;
		position: relative;
	}
	
	header h2 {
		text-align: center;
		color: #4d4d4d;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px;
	}
	
	header .icon {
		width: 24px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 14px;
	}
	
	header .icon img {
		width: 10px;
	}
	
	.swiper-pagination-bullet-active {
		background-color: #f5a32d;
	}
	
	.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
		bottom: 0;
	}
	
	.app {
		margin-bottom: 20px;
	}
	
	.app .main {
		position: relative;
	}
	
	.app .main .info {
		padding: 10px;
	}
	
	.app .main .info .head {
		-webkit-align-items: center;
		align-items: center;
		margin-bottom: 15px;
	}
	
	.app .main .info .head img {
		width: 30%;
		margin-right: 10px;
	}
	
	.app .main .info .head .decs {
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	
	.app .main .info .head .decs .title {
		font-size: 14px;
		margin-bottom: 6px;
	}
	
	.app .main .info .head .decs .price {
		font-size: 12px;
	}
	
	.app .main .info .head .decs .price span {
		font-size: 14px;
		color: #00aaee;
	}
	
	.app .main .info .head .decs .price .old {
		color: #999;
		text-decoration: line-through;
	}
	
	.app .main .info .head .decs .price .new {
		color: #0ae;
	}
	
	
	.app .main .info .msg {
		-webkit-just-content: space-between;
		just-content: space-between;
		margin-bottom: 10px;
		text-align: center;
	}
	
	.app .main .info .msg .flex {
		font-size: 14px;
	}
	
	.app .main .info .msg .flex p {
		color: #999;
		margin-bottom: 8px;
	}
	
	.app .main .pricecls .title {
		padding: 10px;
	    background: #f5f5fa;
	    font-size: 14px;
	}
	
	.app .main .pricecls .result {
		width: 92%;
		margin: 0 auto;
		border-bottom: 1px solid #fff;
		height: 3rem;
		line-height: 3rem;
		font-size: 14px;
	}
	
	.app .main .pricecls .result:nth-child(odd) {
		background-color: #ebeff2;
	}
	
	.app .main .pricecls .result:nth-child(even) {
		background-color: #f2f7fa;
	}
	
	.app .main .pricecls .result:nth-child(2) {
		margin-top: 4%;
	}
	
	.app .main .pricecls .result:last-child {
		border-bottom: none;
	}
	
	.app .main .pricecls .result .h {
		width: 32%;
		text-align: center;
		border-right: 1px solid #fff;
	}
	
	.app .main .pricecls .result .price {
		text-indent: 0.6rem;
	}
	
	.app .main .pricecls table {
		width: 95%;
		margin: 0 auto;
	}
	
	.app .main .pricecls table tr {
		border-bottom: 1px solid #fff;
	}
	
	.app .main .pricecls table tr:last-child {
		border-bottom: none;
	}
	
	.app .main .pricecls table td {
		line-height: 3rem;
	}
	
	.app .main .pricecls table td.left {
		border-right: 1px solid #fff;
	}
	
	.app .main .pricecls table tr:nth-child(odd) {
    	background-color: #ebeff2;
    }
    
    .app .main .pricecls table tr:nth-child(even) {
	    background-color: #f2f7fa;
	}
	
	.app .main .pricecls .tabbox .s1 {
		display: none;
	}
	
	.app .main .pricecls .tabbox .s1.active {
		display: block;
	}
	
	.app .main .pricecls .tabbox .s1 .price_num {
		font-size: 14px;
		margin-top: 15px;
		text-align: center;
	}
	
	.app .main .pricecls .tabbox .s1 .price_num .icon {
		width: 12px;
	    height: 5px;
	    background: url(/assets/img/price_arrow.png) no-repeat;
	    background-size: cover;
	    margin: 8px auto 0;
	}
	
	.app .main .pricecls .tabbox .s1 .price_item {
		text-align: center;
		font-size: 14px;
		background-color: #00AAEE;
    	color: #fff;
    	margin: 6px;
    	padding: 4px 0;
	}
	
	.app .main .pricecls .tabbox .s1 .price_item .bor {
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
	}
	
	.app .main .pricecls .tabbox .s1 .price_info {
		-webkit-justify-content: space-between;
		justify-content: space-between;
    	margin: 0 6px;
	}
	
	.apply {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		background-color: #0ae;
	}
	
</style>
</head>
<body>
	<header class="b_bor">
		<div class="icon flexbox" id="back"><img src="/assets/img/back2@2x.png" /></div>
		<h2>估值报告</h2>
	</header>
	
	<a href="/userCenter/addOrderList" class="apply">立刻申请</a>
	
	<section class="app">
		<div class="main">
			<div class="info">
				<div class="head flexbox">
					<img src="/assets/img/che300.jpg" />
					<div class="decs flexbox flex">
						<p class="title" id="title"></p>
						<p class="price" id="newcatprice">新车指导价：<span class="new">--万</span></p>
					</div>
				</div>
				<div class="msg flexbox">
					<div class="flex">
						<p>所在城市</p>
						<span id="city"></span>
					</div>
					<div class="flex l_bor r_bor">
						<p>上牌日期</p>
						<span id="regdate"></span>
					</div>
					<div class="flex r_bor">
						<p>行驶里程</p>
						<span id="mile"></span>
					</div>
					<div class="flex">
						<p>车身颜色</p>
						<span id="color"></span>
					</div>
				</div>
			</div>
			<div class="pricecls">
				<div class="title t_bor b_bor">权威定价数据</div>
				<div class="result flexbox">
					<span class="h">建议卖车价</span>
					<span class="price flex" id="c2b_price"></span>
				</div>
				<div class="result flexbox">
					<span class="h">建议买车价</span>
					<span class="price" id="b2c_price"></span>
				</div>
				<div class="result flexbox">
					<span class="h">车商收购价</span>
					<span class="price" id="low_c2b_price"></span>
				</div>
				<div class="result flexbox">
					<span class="h">车商售车价</span>
					<span class="price" id="low_b2c_price"></span>
				</div>
			</div>
		</div>
	</section>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script>
		$(function(){
			var $data = _x.getSessionStorage("c_o_result2"),
				default_car_condition = $data.default_car_condition
			console.log($data)
			$('#back').click(function(){
		    	window.history.go(-1);
		    });
			
			//获取新车价格
			axios.get("/che300/getNewCarPrice",{
				params: {
					modelId: $data.modelId,
					zone: $data.zone
				}
			})
			.then(function(res){
				console.log(res.data)
				if (!_x.isEmpty(res.data.ret_code) && res.data.ret_code === "0") {
					$("#newcatprice").html("新车指导价：<span class='new'>"+ res.data.ret_msg +"</span>")
				} else {
					$("#newcatprice").html("新车指导价：<span class='old'>"+ $data.model_price +"</span>&nbsp;&nbsp;<span class='new'>"+ res.data.price +"万</span>")
				}
			})
			.catch(function(){
				$("#newcatprice").html("新车指导价：<span class='new'>"+ $data.model_price +"万</span>")
			})
			
			$("#title").html($data._title)
			$("#city").html($data._city.replace(" ", ""))
			var regdate = $data._regdate.split("-"),
				date = regdate[1] < 10 ? regdate[1].replace("0", "") : regdate[1]
			$("#regdate").html(regdate[0] +"年"+ date + "月")
			$("#mile").html($data.mile + "万公里")
			$("#color").html($data.color)
			
			$("#tabtype").find("li[data-type='"+ default_car_condition +"']").addClass("active")
			$("#c2b_price").html($data.c2b_price + "万")
			$("#b2c_price").html($data.b2c_price + "万")
			$("#low_c2b_price").html($data.low_c2b_price +"-"+ $data.high_c2b_price + "万")
			$("#low_b2c_price").html($data.low_b2c_price +"-"+ $data.high_b2c_price + "万")
		})
	</script>
</body>
</html>
